

<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
    :index-of-parent-list="indexOfParentList" ref="containerWrapper">
    <div :key="widget.id" class="sub-form-container" :class="[selected ? 'selected' : '', customClass]"
      @click.stop="selectWidget(widget)">
      <table class="table-layout">
        <tbody>
          <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
            <td><el-radio /></td>
            <template v-for="(colWidget, colIdx) in row.cols">
              <table-cell-widget v-if="!colWidget.merged" :widget="colWidget" :designer="designer" :key="colWidget.id"
                :parent-list="widget.cols" :row-index="rowIdx" :row-length="widget.rows.length" :col-index="colIdx"
                :col-length="row.cols.length" :col-array="row.cols" :row-array="widget.rows" :parent-widget="widget"
                type="subFormWidget" />
            </template>
          </tr>
        </tbody>
      </table>
      <!-- <el-form label-position="top">
        <div class="sub-form-table">
          <draggable :list="widget.widgetList" item-key="id"
            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }" tag="transition-group"
            :component-data="{ name: 'fade' }" handle=".drag-handler"
            @add="evt => onSubFormDragAdd(evt, widget.widgetList)" @end="onSubFormDragEnd" @update="onContainerDragUpdate"
            :move="checkContainerMove">
            <template #item="{ element: subWidget, index: swIdx }">
              <div class="sub-form-table-column" :style="{ width: subWidget.options.columnWidth }">
                <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id"
                  :parent-list="widget.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget"
                  :design-state="true" :sub-form-item-flag="true" />
              </div>
            </template>
          </draggable>
        </div>
      </el-form> -->
    </div>
  </container-wrapper>
</template>

<script>
import i18n from "@/utils/i18n";
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper";
// import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";
import TableCellWidget from "@/components/form-designer/form-widget/container-widget/table-cell-widget";
import refMixinDesign from "@/components/form-designer/refMixinDesign";

export default {
  name: "sub-form-widget",
  componentName: "ContainerWidget",
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ["refList"],
  components: {
    ContainerWrapper,
    TableCellWidget
    // ...FieldComponents
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object
  },
  provide () {
    return {
      getSubFormFieldFlag: () => true,
      getSubFormName: () => this.widget.options.name
    };
  },
  computed: {
    selected () {
      return this.widget.id === this.designer.selectedId;
    },

    customClass () {
      return this.widget.options.customClass || "";
    }
  },
  watch: {
    //
  },
  created () {
    this.initRefList();
  },
  mounted () {

  },
  methods: {


    onSubFormDragAdd (evt, subList) {
      const newIndex = evt.newIndex;
      if (subList[newIndex]) {
        this.designer.setSelected(subList[newIndex]);
      }

      this.designer.emitHistoryChange();
      console.log("test", "onSubFormDragAdd");
      this.designer.emitEvent("field-selected", this.widget);
    },

    onSubFormDragEnd (evt) {
      console.log("sub form drag end: ", evt);
    }
  }
};
</script>

<style lang="scss" scoped>
.sub-form-container {
  //width: 100%;
  padding: 8px;
  border: 1px dashed #fff;

  :deep(.sub-form-table) {
    min-height: 68px;

    div.sub-form-table-column {
      display: inline-block;
      //width: 200px;
    }
  }

  :deep(.ghost) {
    content: "";
    font-size: 0;
    //height: 3px;
    height: 74px;
    width: 1px;
    box-sizing: border-box;
    display: inline-block;
    background: #FF7D1E;
    border: 2px solid#FF7D1E;
    outline-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
}

.sub-form-container.selected {
  outline: 2px solid#FF7D1E !important;
}

div.sub-form-container {
  padding: 0px;
  border: 1px dashed #fff;
  box-sizing: border-box;

  table.table-layout {
    width: 100%;
    text-align: center;
    //border: 1px solid #c8ebfb;
    border-collapse: collapse;
    table-layout: fixed;

    :deep(td) {
      height: 48px;
      border: 1px solid #336699;
      padding: 3px;
      display: table-cell;
    }

    .form-widget-list {
      border: 1px dashed #fff;
      min-height: 36px;
    }
  }
}

.sub-form-container.selected {
  outline: 2px solid#FF7D1E !important;
}
</style>

<!-- <style lang="scss" scoped></style> -->
